<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <!-- <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> -->
    <script src="./axios.js"></script>
</head>

<body>
    <!-- 
     axios
Axios是一个基于promise 的 HTTP 库，可以用在浏览器和 node.js中,
官网：https://www.npmjs.com/package/axios
https://github.com/axios/axios


1.get请求
axios.get("http://localhost:3000/users",{params:{name :"kerwin"
}).then(res=>{console.1og(res.data)
2.post请求
如果test.json中的id值不加“”，就为数字类型，添加后会自动加1

启动json-server:
json-server --watch test.json
   -->
    <div id="root">
        <button @click="handleClick">click</button>
        <ul>
            <li v-for="item in datalist" :key="item.id">
                {{item.name}}- {{item.age}}
            </li>
        </ul>
    </div>
    <script>
        var obj = {
            data() {
                return {
                    datalist: []
                }
            },
            methods: {
                handleClick() {
                    // console.log(axios);
                    //get
                    // axios.get("http://localhost:3000/list").then(res => {
                    //         // console.log(res.data)
                    //         this.datalist = res.data
                    //     }).catch(err => {
                    //         console.log(err);
                    //     })
                    //post-json（黙认格式）
                    // axios.post("http://localhost:3000/list", {
                    //         name: "kerwin",
                    //         age: 20
                    //     }).then(res =>
                    //         console.log(res.data)
                    //     )
                    //     .catch(err => {
                    //         console.log(err);
                    //     })

                    //post-form,
                    //但报错，不知原因
                    // axios.post("http://localhost:3000/list",
                    //         "name=kerwin111&age=100")
                    //     .then(res =>
                    //         console.log(res.data)
                    //     )
                    //     .catch(err => {
                    //         console.log(err);
                    //     })

                    // put
                    // axios.put("http://localhost:3000/list/9", "name=kerwin11111111&age=200").then(res => {
                    //         console.log(res.data)
                    //     })
                    //     .catch(err => {
                    //         console.log(err);
                    //     })
                    // 上面这段代码报 错，下面这段代码正常
                    // axios.put("http://localhost:3000/list/cced", {
                    //         name: "kerwin1111111111",
                    //         age: 200
                    //     })
                    //     .then(res => {
                    //         console.log(res.data)
                    //     })
                    //     .catch(err => {
                    //         console.log(err);
                    //     })


                    // delete
                    // 

                    // 完整版的写法：
                    axios({
                            method: "PUT",
                            url: "http://localhost:3000/list/de44",
                            data: {
                                name: "kerwin1111111111",
                                age: 200
                            }
                        }).then(res => {
                            console.log(res.data)
                        })
                        .catch(err => {
                            console.log(err);

                        })

                }
            }
        }

        var app = Vue.createApp(obj).mount('#root')
    </script>
</body>

</html>